<template>
  <div class="bg">
    <header class="screen-header" data-v-6e92ad55="">
      <div data-v-6e92ad55="">
        <img src="/img/top.12760b1e.png" alt="" data-v-6e92ad55="" />
      </div>
      <span class="title" data-v-6e92ad55="">设备监控——公区照明系统</span>
      <div class="title-right" data-v-6e92ad55="">
        <span class="datetime" data-v-6e92ad55="">{{ now }}</span>
      </div>
    </header>

    <div class="LSelect_root">
      <span class="label">图层选择</span>
      <el-select v-model="check" size="mini">
        <el-option
          v-for="item in check_form"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>

    <div class="tuli">常亮灯打开🟢 人体感应灯🔵 常亮灯关闭🔴 通讯异常⚠️</div>

    <!-- 第一 层 -->
    <div class="main" v-show="check === '001' ? true : false">
      <img
        src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636866072053268805.jpg"
        alt=""
      />

      <button class="btn">🔵</button>
      <button class="btn2" @click="pop17_1 = true">🟢</button>
      <button class="btn3">🔴</button>
      <button class="btn4">⚠️</button>
      <div class="box box1">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
      <div class="box box2">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
        <div class="box box3">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
        <div class="box box4">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
        <div class="box box5">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
        <div class="box box6">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
       <div class="box box7">
           <p>二层西照明控制设定</p>
        <ul>
          <li>照度上限值：{{ box_form.a }}</li>
          <li>照度下限值：{{ box_form.b }}</li>
          <li>照明启用时间：{{ box_form.c }}</li>
          <li>照明停用时间：{{ box_form.d }}</li>
        </ul>
      </div>
       <div class="box box8">
           <p>二层西照明控制设定</p>
        <ul>
          <li>照度上限值：{{ box_form.a }}</li>
          <li>照度下限值：{{ box_form.b }}</li>
          <li>照明启用时间：{{ box_form.c }}</li>
          <li>照明停用时间：{{ box_form.d }}</li>
        </ul>
      </div>
    </div>

    <!-- 第二层 -->
    <div class="main2  " v-show="check === '002' ? true : false">
      <img
        src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636866072284515102.jpg"
        alt=""
      />

      <button style="left: 45%;">🔵</button>
      <button  style="left: 50%;" @click="pop17_1 = true">🟢</button>
      <button  style="left: 55%;">🔴</button>
      <button  style="left: 60%;">⚠️</button>

        <div class="box box1">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
      <div class="box box2">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
        <div class="box box3">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
        <div class="box box4">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
        <div class="box box5">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
        <div class="box box6">
        <ul>
          <li>控制状态：{{ box_form.a }}</li>
          <li>当前状态：{{ box_form.b }}</li>
          <li>手自动状态：{{ box_form.c }}</li>
          <li>当前照度值：{{ box_form.d }}</li>
        </ul>
      </div>
       <div class="box box7">
           <p>二层西照明控制设定</p>
        <ul>
          <li>照度上限值：{{ box_form.a }}</li>
          <li>照度下限值：{{ box_form.b }}</li>
          <li>照明启用时间：{{ box_form.c }}</li>
          <li>照明停用时间：{{ box_form.d }}</li>
        </ul>
      </div>
       <div class="box box8">
           <p>二层西照明控制设定</p>
        <ul>
          <li>照度上限值：{{ box_form.a }}</li>
          <li>照度下限值：{{ box_form.b }}</li>
          <li>照明启用时间：{{ box_form.c }}</li>
          <li>照明停用时间：{{ box_form.d }}</li>
        </ul>
      </div>

    </div>
  </div>
  
  <!-- 弹窗 -->
  <div class="dailog" v-dialogdrag>
    <el-dialog
      v-model="pop17_1"
      title="历史曲线展示"
      width="35%"
      :before-close="handleClose17_1"
      class="dialog"
    >
      <span style="color: #fff">选择时间：</span>
      <el-date-picker
        v-model="time17_1"
        type="daterange"
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      ></el-date-picker>
      <el-button type="primary" style="margin-left: 15px">载入数据</el-button>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="曲线展示" name="first">
          <echarts1></echarts1>
        </el-tab-pane>
        <el-tab-pane label="数据展示" name="second">
          <div class="pane">
            <div class="btn">
              <el-button @click="expportCSV17_1">保存为csv格式</el-button>
              <el-button @click="expportExcel17_1">保存为excel格式</el-button>
              <el-button @click="expportPDF17_1">保存为pdf格式</el-button>
            </div>
            <el-table
              :data="tableData17_1"
              style="width: 100%"
              border
              class="table"
              height="315px"
              id="table"
            >
              <el-table-column prop="time" label="日期"></el-table-column>
              <el-table-column prop="data" label="数据"></el-table-column>
            </el-table>
            <div class="page">
              <el-pagination
                v-model:currentPage="currentPage1"
                :page-size="100"
                layout="total, prev, pager, next"
                :total="1000"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import echarts1 from "@/components/echarts1.vue";
import fixedPoint from "@/components/fixedPoint.vue";
import CsvExportor from "csv-exportor"; //导出csv
import htmlToPdf from "@/utils/htmlToPdf"; //导出pdf
export default {
  components: {
    echarts1,
    fixedPoint,
  },
  data() {
    return {
      check: "002",
      pop17_1: false,
      check_form: [
        {
          value: "001",
          label: "主楼二层照明分布图",
        },
        {
          value: "002",
          label: "主楼三层照明分布图",
        },
      ],
      time17_1: [new Date(), new Date()],
      activeName: "first",
      tableData17_1: [
        { time: "2022-01-12 01:00", data: "26.70" },
        { time: "2022-01-12 01:00", data: "25.00" },
        { time: "2022-01-12 02:00", data: "28.00" },
        { time: "2022-01-12 03:00", data: "30.50" },
        { time: "2022-01-12 04:00", data: "11.00" },
        { time: "2022-01-12 05:00", data: "9.00" },
        { time: "2022-01-12 06:00", data: "23.00" },
        { time: "2022-01-12 07:00", data: "10.20" },
        { time: "2022-01-12 08:00", data: "15.00" },
        { time: "2022-01-12 09:00", data: "21.00" },
      ],
      box_form:{
          a:"手动",
          b:"吸合",
          c:"手动",
          d:"44Lx"
      }
    };
  },
  methods: {
    //导出CSV
    expportCSV17_1() {
      let tableData = this.tableData17_1;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "室内温度.csv");
    },
    //导出excel表格
    expportExcel17_1() {
      let tableData = this.tableData17_1;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "室内温度.xls");
    },
    //导出pdf
    expportPDF17_1() {
      htmlToPdf.downloadPDF(document.getElementById("table"), "室内温度");
    },
  },
};
</script>


<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  color: #fff;
  background: url("../../../assets/img/bj.jpg") no-repeat;
  text-align: center;
  .screen-header .title[data-v-6e92ad55] {
    position: absolute;
    left: 50.6%;
    top: 44%;
    font-size: 33px;
    transform: translate(-50%, -50%);
  }
  .title {
    position: absolute;
    left: 50.6%;
    top: 44%;
    font-size: 33px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 76px;
    top: 72%;
    transform: translateY(-80%);
  }
  .box-tit[data-v-6e92ad55] {
    height: 50px;
    line-height: 29px;
    width: 100%;
    font-size: 18px;
    color: #b8f9ff;
    padding-left: 39px;
    background: url()
      no-repeat;
    box-sizing: border-box;
    display: flex;
  }
  .box-tit[data-v-6e92ad55] span {
    margin-right: 200px;
  }
  .LSelect_root {
    height: 40px;
    background-image: url("../../../assets/img/1.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding: 0 6px 10px 20px;
    box-sizing: border-box;
    justify-content: space-between;
    width: 300px;

    .label {
      font-size: 15px;
      font-weight: 400;
      color: #b8f9ff;
      padding: 0 9px;
      box-sizing: border-box;
      flex-shrink: 0;
    }
  }
}
.tuli {
  margin: 20px;
}
.main {
  height: 80%;
  position: relative;
  margin: auto;
  img {
    height: 100%;
  }
  .btn {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 28%;
    left: 50%;
  }
  .btn2 {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 28%;
    left: 55%;
  }
  .btn3 {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 28%;
    left: 45%;
  }
  .btn4 {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 28%;
    left: 60%;
  }
  .box1{
 top: 37%;
    left: 21%;
}
.box2{
     top: 52.5%;
    left: 21%;
}
.box3{
     top: 44.8%;
    left: 28%;
}
.box4{
 top: 37%;
    left: 69%;
}
.box5{
     top: 52.5%;
    left: 69%;
}
.box6{
     top: 44.8%;
    left: 63%;
}
.box7{
      top: 83%;
    left: 19%;
}
.box8{
      top: 83%;
    left: 71%;
}
}

.dailog {
  /deep/ .el-dialog {
    //  background-color: #ffffff;
    .el-dialog__title,
    .el-dialog__headerbtn {
      color: #fff; //弹出框标题
    }
    .el-dialog__body {
      padding: 5px 20px;
    }

    // 日期选择样式
    .el-range-editor.el-input__inner {
      border: 1px solid #ccc;
    }

    // to样式
    .el-date-editor .el-range-separator {
      width: 8%;
      color: #ccc;
    }
    // el-tabs样式
    .el-tabs__item {
      color: #fff;
      font-size: 12px;
      height: 30px;
      line-height: 30px !important;
      margin-top: 10px;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item {
      border: 1px solid #ccc;
      border-bottom: none;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;

      &:first-child {
        border-right: 1px solid #72aeff;
      }

      &:last-child {
        border-left: 1px solid #72aeff;
      }
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
      border: 1px solid #72aeff;
      border-bottom: none;
      color: #72aeff;
    }
  }
}
.box{
    width: 150px;
    background-color: orange;
    position: absolute;
    font-size: 12px;
}

.main2 {
  height: 80%;
  position: relative;
  margin: auto;
  img {
    height: 100%;
  }
  button{
      
      background-color: transparent;
    border: none;
    position: absolute;
    top: 30%;
  }
  
  .btn2 {
    left: 55%;
  }
  .btn3 {
    left: 45%;
  }
  .btn4 {
    left: 60%;
  }

   .box1{
 top: 39%;
    left: 22%;
}
.box2{
     top: 46%;
    left: 31%;
}
.box3{
     top: 53%;
    left: 22%;
}
.box4{
 top: 39%;
    left: 72%;
}
.box5{
     top: 53%;
    left: 72%;
}
.box6{
     top: 46%;
    left: 63%;
}
.box7{
      top: 83%;
    left: 19%;
}
.box8{
      top: 83%;
    left: 71%;
}
}
</style>
